<template>

  <el-container class="home-container">
    <el-header >
      <div>
 <img src ="../assets/logo.png" alt="" class="img_head">
        <span>学生选课管理</span>
      </div>
      <el-button type ="text" @click ="logout" class="outbtn">退出</el-button>
    </el-header>


    <el-container>

      <el-aside width="200px">
      <!-- 侧边栏菜单区域-->
        <el-menu
            background-color="#f0ffff"
            text-color=""
            active-text-color="" router>

          <el-menu-item index="/student">
            <i class="el-icon-document"></i>
            <span slot="title">学生列表</span>
          </el-menu-item>


          <el-menu-item index="/curmmg">
            <i class="el-icon-document"></i>
            <span slot="title">课程列表</span>
          </el-menu-item>

        </el-menu>
      </el-aside>
      <el-main>
      <!--路由占位 -->
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>



</template>

<script>


export default {
  data(){
    return{
      username:global.username
    }
  },
  mounted:function() { //钩子函数
  },
  methods: {
    logout(){
      this.$router.push("/login");
    },
    getUsername(){
      this.$http.get('username', {
        username: this.username
      }).then(
          res =>{
            this.username = res.data.data;
            console.log(this.username);
          },res =>{
            console.log(res.state);
          })
    }
  }
}
</script>

<style lang="less" scoped>
.home-container{
  height: 100%;
}
.el-menu{
  margin-top: 10%;
}
.el-header{
  background-color:rgb(5,25,68);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color:#ffffff;

  font-size:20px;
  >div{
    display: flex;
    align-items: center;
    span{
      margin-right: 15px;
    }
  }
  .img_head{
     width: 35%;
    height: 70%;
  }
  .outbtn{
    height: 36px;

  }

}
.el-aside{
  background-color:#f0ffff;
}
.el-main{
  background-color: aliceblue;
}
</style>